<template>
  <!-- 衰减曲线分析 -->
  <div class="targetStatisticsscoreAttenuation">
    <div ref="dom" class="dome"></div>
  </div>
</template>
<script  setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick} from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let dom = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(dom.value);
  const option = {
          dataZoom: [
            {
              type: "inside",
              xAxisIndex: 0,
            },
            {
              show: true,
              type: "slider",
              xAxisIndex: 0,
              textStyle: {
                color: "#26FFFF",
              },
              backgroundColor: "#074468",
              dataBackground: {
                lineStyle: {
                  color: "#597F97",
                }, // 阴影的线条样式
                areaStyle: {
                  color: "#597F97",
                }, // 阴影的填充样式
              },
              borderColor: "#046291",
              top: "95%",
              start: 60,
              end: 100,
            },
          ],
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {},
            },
          },
          tooltip: {
            axisPointer: {
              type: "shadow",
            },
            trigger: "axis",
            textStyle: {
              align: "left",
            },
          },
          legend: {
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
              color: "#90D4F8",
              align: "left",
            },
          },
          grid: {
            top: "15%",
            left: "5%",
            right: "5%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            axisLine: {
              show: false,
              interval: 0,
              lineStyle: {
                color: "#468C9E",
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#213862",
                width: 1,
                type: "solid",
              },
            },
            data: props.carData.time,
          },
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#213862",
                  width: 1,
                  type: "solid",
                },
              },
              axisLine: {
                show: true,
                interval: 0,
                lineStyle: {
                  color: "#468C9E",
                  type: "solid",
                },
              },

              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              data: props.carData.scoreBack,
              type: "line",
              name: "正常清扫得分",
              barWidth: 10,
              symbolSize: 8,
              symbol: "circle",
              itemStyle: {
                color: "#D28446",
              },
            },
            {
              data: props.carData.scoreNotClean,
              type: "line",
              name: "衰减趋势评分",
              barWidth: 10,
              symbolSize: 8,
              symbol: "circle",
              itemStyle: {
                color: "#4A4AA6",
              },
            },
           
          ],
        };
  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};
// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>
<style scoped>
.dome,
.targetStatisticsscoreAttenuation {
  width: 100%;
  height: 100%;
}
</style>